<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="example-body flex-row-center" @click="areaShow=true">
		<up-input inputAlign="right" border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx"
			color="#DEDEDE" placeholder="请选择地区" v-model="areaInfo.area"></up-input>
		<up-icon name="arrow-right" color="#DEDEDE" size="28rpx"></up-icon>
	</view>
	<!-- 地址选择器 -->
	<root-portal>
		<up-picker :defaultIndex="defaultIndex" :loading="loading" @cancel="()=>areaShow=false" :show="areaShow"
			ref="uPickerRef" keyName="name" :columns="cityList" @confirm="confirm" @change="changeHandler"></up-picker>
	</root-portal>
</template>

<script setup>
	const emit = defineEmits(['confirmArea']);
	const props = defineProps({
		areaInfo: {
			type: Object,
			default: {}
		}
	})
	const areaShow = ref(false);
	const loading = ref(false);
	const uPickerRef = ref(null);
	const areaInfo = ref(props.areaInfo);
	const cityLevel1 = reactive([]);
	const cityLevel2 = reactive([]);
	const cityLevel3 = reactive([]);
	const cityList = reactive([]);
	const defaultIndex = ref([1, 2, 0]);

	onBeforeMount(() => {
		getAreaInfo();
	})
	const getAreaInfo = async () => { //获取地区信息
		loading.value = true;
		const res = await $Api.area.getAreaInfo();
		// console.log('getarea', res);
		loading.value = false;
		if (res.code == '1') {
			initCityData(res.data);
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const initCityData = (cityData) => {
		// console.log('cityData', cityData);
		let indexArr = [0, 0, 0]
		// 遍历城市js
		cityData.forEach((item1, index1) => {
			let temp2 = [];
			cityLevel1.push({
				name: item1.name,
				province: item1.city_code
			});
			if (item1.city_code == props.areaInfo.province) {
				indexArr.splice(0, 1, index1);
			}

			let temp4 = [];
			let temp3 = [];
			// 遍历市
			item1.data.forEach((item2, index2) => {
				temp2.push({
					name: item2.name,
					city: item2.city_code
				});
				if (item2.city_code == props.areaInfo.city) {
					indexArr.splice(1, 1, index2);
				}
				// 遍历区
				item2.data.forEach((item3, index3) => {
					temp3.push({
						name: item3.name,
						district: item3.city_code
					});
					if (item3.city_code == props.areaInfo.district) {
						indexArr.splice(2, 1, index3);
					}
				})
				temp4[index2] = temp3;
				temp3 = [];
			})
			cityLevel3[index1] = temp4;

			cityLevel2[index1] = temp2;
		})
		// 选择器默认城市  --》第三列
		const cityListLevel3 = cityLevel3[indexArr[0]] && cityLevel3[indexArr[0]].length > 0 ? cityLevel3[indexArr[0]][
			indexArr[1]
		] : []
		cityList.push(cityLevel1, cityLevel2[indexArr[0]], cityListLevel3);
		// console.log('cityLevel1', cityLevel1);
		// console.log('cityLevel2', cityLevel2);
		// console.log('cityLevel3', cityLevel3);
		// console.log('cityList', cityList);
		defaultIndex.value = [...indexArr];
		// console.log('defaultIndex.value', defaultIndex.value);
	}
	const changeHandler = (e) => { //切换省市区·
		const {
			columnIndex,
			index,
			indexs,
			value,
			values
		} = e;
		if (columnIndex === 0) { // 选择第一列数据时
			// 设置第二列关联数据
			if (cityLevel2.length > 0) {
				uPickerRef.value.setColumnValues(1, cityLevel2[index]);
			}
			// 设置第三列关联数据
			if (cityLevel3.length > 0 && cityLevel3[index].length > 0) {
				uPickerRef.value.setColumnValues(2, cityLevel3[index][columnIndex]);
			} else {
				uPickerRef.value.setColumnValues(2, []);
			}
		} else if (columnIndex === 1) { // 选择第二列数据时
			// 设置第三列关联数据
			uPickerRef.value.setColumnValues(2, cityLevel3[indexs[0]][index]);
		}
	}
	const confirm = (e) => { //确认选择
		// console.log('confirm', e.value);
		let areaArr = [];
		let areaObj = {
			district: '',
			city: '',
			province: ''
		}
		if (e.value && e.value.length > 0) {
			e.value.forEach((item, index) => {
				if (item && item.name) {
					areaArr.push(item.name);
				}
				if (item && item.province) {
					areaObj.province = item.province;
				}
				if (item && item.city) {
					areaObj.city = item.city;
				}
				if (item && item.district) {
					areaObj.district = item.district;
				}
			})
		}
		emit('confirmArea', areaObj);
		// areaInfo.value = areaArr.join('-');
		areaInfo.value = {
			...areaObj,
			area: areaArr.join('')
		};
		areaShow.value = false;
	}
</script>

<style lang="scss" scoped>
	.example-body {
		flex: 1;
		justify-content: flex-end;

		.example-icon {
			font-size: 28rpx;
			color: #fff;
			margin: 0 24rpx;
		}

		::v-deep.placeholderClass {
			color: #5B6868 !important;
			font-size: 26rpx;
			font-weight: 500;
		}
	}
</style>